<template>
	<div class="header dl-row-sb center">
		<div class="center-box dl-row-sb">
			<div class="dl-row center">
				<div class="logo dl-row center">
					<!-- <img :src="logoImg" /> -->
					<div>
						<h1>仓库消防知识学测系统</h1>
						<!-- <p>深圳市瑞立视多媒体科技有限公司</p> -->
					</div>
				</div>
				<div class="search-box">
					<!-- <el-input placeholder="请输入课程关键词" prefix-icon="el-icon-search" clearable
						@keyup.enter.native="searchCourse" v-model="inputSearch">
					</el-input> -->
				</div>
			</div>
			<div class="dl-row-sb center">
				<el-menu :default-active="activePath" class="ml-auto" mode="horizontal" @select="handleSelect"
					text-color="#545C63" active-text-color="#0068B6">
					<el-menu-item :index="item.path" v-for="item in meNus" :key="item.path">{{ item.name }}
					</el-menu-item>
				</el-menu>
				<div class="ml-10">
					<!-- <el-dropdown v-if="user.name" @command="handleCommand">
				<span class="el-dropdown-link"
				  >{{ user.name }}<i class="el-icon-arrow-down el-icon--right" />
				</span>
				<el-dropdown-menu slot="dropdown">
				  <el-dropdown-item command="logout">退出</el-dropdown-item>
				</el-dropdown-menu>
			  </el-dropdown> -->
					<div class="user-box">
						<!-- <el-avatar  :size="35" :src="user.avatar"></el-avatar> -->
						<!-- <img :src="user.avatar" v-on:mouseover.native="showDetails(true)" v-on:mouseout.native="showDetails(false)" style="width: 35px;height: 35px;border-radius: 49%;"/> -->
						<el-popover placement="bottom" width="280" trigger="hover">
							<div class="user-down">
								<div class="dl-row center">
									<el-avatar v-if="user.avatar" fit="cover" :size="50" :src="user.avatar"></el-avatar>
									<el-avatar v-else :size="50" fit="cover" icon="el-icon-user-solid"></el-avatar>
									<div class="name">
										<h1>{{user.name}}</h1>
									</div>
								</div>
								<div class="company">
									<p>{{user.dept}}</p>
									<!-- <p>岗位：{{user.job}}</p> -->
								</div>
								<!-- <p class="exit" @click="logout">安全退出</p> -->
							</div>
							<el-avatar v-if="user.avatar" fit="cover" slot="reference" :size="35" :src="user.avatar"></el-avatar>
							<el-avatar v-else slot="reference"  fit="cover" :size="35" icon="el-icon-user-solid"></el-avatar>
						</el-popover>
					</div>
					<!-- <el-button v-else type="success" round @click="toLogin">登录</el-button> -->
				</div>
				<!-- <div class="ml-10" v-else>
					<el-button type="success" round @click="toLogin">登录</el-button>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import store from '@/store';
	import {
		getToken
	} from '@/utils/auth';

	export default {
		components: {
			
		},
		data() {
			return {
				logoImg: require('../assets/image/logo-dark.png'),
				userImg: require('../assets/image/u353.png'),
				inputSearch: '',
				showPerson: false,
				showPerson1: false,
				activePath: '/',
				meNus: [{
						name: '课程',
						path: '/',
					},
					// {
					// 	name: '题库',
					// 	path: '/course/info',
					// },
					// {
					// 	name: '考试',
					// 	path: '/course/exam',
					// },
					{
						name: '个人中心',
						path: '/userInfo',
					},
				],
			};
		},
		computed: {
			...mapGetters(['user']),
		},
		created() {
			//无后端环境调试去除,加载
			if (getToken()) {
				store.dispatch('GetInfo').then(() => {});
			}
			this.activePath = this.$route.path;
			if (this.$route.path === '/home') this.activePath = '/';
			// 在头部监听全局指令 v-login 事件
			this.$apps.$on('toLogin', () => {
				this.toLogin();
			});
		},
		destroyed() {
			// 退出时销毁事件
			this.$apps.$off('toLogin', () => {});
		},
		methods: {
			searchCourse() {
				if (this.inputSearch) {
					this.$router.push({
						path: '/search',
						query: {
							"courseName": this.inputSearch
						}
					})
					this.inputSearch = ""
				}
			},
			handleSelect(key) {
				if (
					this.$route.path === key ||
					(key === '/' && this.$route.path === '/home')
				)
					return;
				this.$router.replace({
					path: key
				});
			},
			toLogin() {
				//this.$router.replace({path: '/login'})
				this.$refs.form.dialog = true;
			},
			handleCommand(command) {
				this.$confirm('是否确定退出当前账号？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					this.logout();
				});
			},
			logout() {
				this.$confirm('是否确定退出当前账号？', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$store.dispatch('LogOut').then(() => {
				  	this.$router.push({
				  		path: '/login'
				  	});
				  });
				})
			},
			showDetails(type) {
				// setTimeout(()=> {
				// 	this.showPerson=type;
				// }, 500);
				this.showPerson = type;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.el-dropdown {
		font-size: 16px;
	}

	.el-menu {
		width: 500px;
	}

	.el-menu.el-menu--horizontal {
		border: none;
	}

	.el-dropdown-menu__item,
	.el-menu-item {
		font-size: 16px;
	}

	.el-menu--horizontal>.el-menu-item.is-active {
		font-weight: bold;
		border-bottom: 4px solid #0068b6;
	}

	.el-menu--horizontal>.el-menu-item {
		margin: 0 10px;
		height: 74px;
		line-height: 74px;
	}

	.user-right {
		float: right;

		a {
			color: #317ef3;
		}
	}

	.user-box {
		cursor: pointer;
		border: 2px #ffffff solid;
		width: 39px;
		height: 39px;
		border-radius: 49%;

		//position: relative;
	}

	.user-box:hover {
		border: 2px #0068b6 solid;
		transition: border-color 0.6s ease;
	}

	.user-down {
		padding: 15px 20px 0 15px;
		//background: #ffffff;
		border-radius: 12px;
		width: 270px;
		//position: absolute;
		z-index: 999;
		top: 55px;
		right: 0;
		//box-shadow: 0px 4px 20px 0px rgba(0, 104, 182, 0.1);
		.name {
			margin-left: 15px;

			h1 {
				font-weight: bold;
				font-size: 18px;
				margin-bottom: 2px;
			}

			p {
				color: #999;
				font-size: 12px;
			}
		}

		.company {
			margin-top: 15px;
			margin-bottom: 20px;
		}

		.company p {
			background: #F3F8FB;
			padding: 8px 20px;
			margin-bottom: 5px;
			color: #666;
			border-radius: 3px;
		}

		.exit {
			color: #666;
			line-height: 44px;
			border-top: 1px solid #edf1f2;
			cursor: pointer;
		}

		.exit:hover {
			color: #333;
		}
	}
</style>
<style>
	.el-popover{
		border-radius: 12px;
	}
</style>
